<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理</title>
<%-- <script  src="bootstrap/js/jquery-3.2.0.js"></script>

<link href="${pageContext.request.contextPath }/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="bootstrap/js/bootstrap.js"></script>
 --%>
<link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/jBootsrapPage.css" />

<script type="text/javascript" src="${pageContext.request.contextPath }/scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/scripts/jBootstrapPage.js"></script>
 
<script type="text/javascript">
	$(function(){
		  createPage(10, 7, '${session.userTotal}');
		  function createPage(pageSize, buttons, total) {
		    $(".pagination").jBootstrapPage({
		      pageSize : pageSize,
		      total : total,
		      maxPageButton:buttons,
		      onPageClicked: function(obj, pageIndex) {
		    	  	var url = "um-queryWithPage";
					var args = {"pageNo":pageIndex+1,"time": new Date()};
					$.post(url,args,function(data){
						$(".list").remove();
						$("#userTable").append(data);
					}); 
		      }
		    });
		  }
		
		var userList = '${session.user_list}';
		var prousername;
		if(userList.length==0){
			$("#user_list").hide();
		}else{
			$("#user_list").show;
		}
		
		$(":input[name='clear']").click(function(){
			$("#queryFrom  :input")  
			 .not(":button, :submit, :reset, :hidden")  
			 .val("") ;
		});
		
		$(".modifiUser").live('click',function(){ 
			var id = $(this).parent().parent().children().eq(0).text();
			var name = $(this).parent().parent().children().eq(1).text();
			var password = $(this).parent().parent().children().eq(2).text();
			var phone = $(this).parent().parent().children().eq(3).text();
			var email = $(this).parent().parent().children().eq(4).text();
			var realName = $(this).parent().parent().children().eq(5).text();
			var idCard = $(this).parent().parent().children().eq(6).text();
			var address = $(this).parent().parent().children().eq(7).text();
			
			var roleId = $(this).parent().parent().children().eq(7).children().eq(0).val(); 
			
			//用于判断修改名子时，判断是否是原来的名字
			prousername = name;
			$("#message").html("");
			
			//全部写上id吧  = =		
			$("#uid").val(id);
			$("#uname").val(name);
			$("#upassword").val(password);
			$("#uphone").val(phone);
			$("#uemail").val(email);
			$("#urealname").val(realName);
			$("#uidcard").val(idCard);
			$("#uaddress").val(address);
			//将角色下拉框设置为该用户对应的值
	 		$("#urole").find("option[value='"+roleId+"']").attr("selected",true);		
		 });
		
		
		
		$("#uname").change(function(){
			
			var val = $(this).val();			
			val = $.trim(val);
			$("#message").html("");
			if(val != "" && val != prousername){
	 			var url = "um-checkName";
				var args = {"checkUserName":val,"time": new Date()};
				$.post(url,args,function(data){
					$("#message").html(data);
				}); 
			}
		});		
		
	});

</script>
<style>
.navbar.navbar-default{
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
.navbar-expand-lg{
font-size:20px;
	font-weight:600;
	padding-left:60px;
}
.navbar-expand-lg li{
	padding-left:25px;
}
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-faded">
  <div class="container">
	  <div class="navbar-header">
	      <a class="navbar-brand" >欢迎${sessionScope.user.userName}</a>
	  </div>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
       <ul class="navbar-nav">
         <li class="nav-item "><a class="nav-link " href="${pageContext.request.contextPath }/homepage.jsp">&nbsp;首页&nbsp;</a></li>
         <s:if test="'管理用户' in #session.rolePermission_name_list">
			 <li class="nav-item dropdown">
	          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink">用户管理</a>
	          <ul class="dropdown-menu"  aria-labelledby="navbarDropdownMenuLink">
	            <li><a class="dropdown-item" href="um-userManage">用户管理</a></li>
	            <li><a class="dropdown-item" href="rm-roleManage">角色管理</a></li>
	          </ul>
	        </li>
		</s:if>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink2">器材管理</a>
          <ul class="dropdown-menu">
          	<s:if test="'管理器材' in #session.rolePermission_name_list">
				<li><a href="em-equipmentManage">器材管理</a></li>
				<li><a href="er-equipmentRent">器材租借</a></li>
				<li><a href="er-equipmentRent">器材归还</a></li>
			</s:if>
			<s:else>
				<h3>器材</h3>
				<li><a href="er-equipmentRent">器材租借</a></li>
			</s:else>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink3">管理场地<span class="caret"></span></a>
          <ul class="dropdown-menu">
          <s:if test="'管理场地' in #session.rolePermission_name_list">
			<li><a href="add_field.action">场地添加</a></li>
			<li><a href="field_modifyRental.action">租金修改</a></li>
			<li><a href="field_show.action">显示场地</a></li>
		</s:if>
		<s:else>
			<h3>场地</h3>
			<li><a href="fieldAll_record.action">显示场地</a></li>	
			<li><a href="fieldRent_order.action">显示租用记录</a></li>	
		</s:else>
          </ul>
        </li>
        <li class=" nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink4">赛事管理<span class="caret"></span></a>
          <s:if test="'管理赛事' in #session.rolePermission_name_list">
			<ul class="dropdown-menu">
				<li><a href="matchApply_findAll.action?currPage=1" >查看赛事申请表</a></li>
				<li><a href="matchApply_apply.action">新建赛事申请表</a></li>
				<li><a href="matchApply_examine.action?currPage=1">审核赛事申请表</a></li>
				<li><a href="matchApply_delete.action?currPage=1" >删除赛事申请表</a></li>
				<li><a href="matchInfo_findAll.action?currPage=1" >查看赛事信息表</a></li>
				<li><a href="matchInfo_listUpdate.action?currPage=1" >更新赛事信息表</a></li>
				<li><a href="matchInfo_delete.action?currPage=1">删除赛事信息表</a></li>
			</ul>
		</s:if>
		<s:else>
			<li><a href="matchApply_findAll.action?currPage=1" >查看赛事申请表</a></li>
			<li><a href="matchInfo_findAll.action?currPage=1">查看赛事信息表</a>	</li>
		</s:else>
        </li>
       </ul>
      </div>
            <%-- <div class="navbar-header">
	      <a class="navbar-brand pull-right" >${sessionScope.user.userName}</a>
	  </div> --%>
  </div>
</nav>
<br /><br />
	
	<div class='container'>
		<div>
		<strong>用户管理</strong>
		<form action="um-userQuery" id ="queryFrom" method="post">
			<table class="table table-condensed">
				<tr>
					<td>用户Id</td>
					<td>用户名</td>
					<td>电话号码</td>
					<td>电子邮箱</td>
				</tr>
				<tr>
					<td>
						<input type="text" name="userId"  onkeyup="value=this.value.replace(/\D+/g,'')"
								value="${sessionScope.query_user.userId}" />
					</td>
					<td>
						<input type="text" name="userName" value="${sessionScope.query_user.userName}"/>
					</td>
					
					<td>
						<input type="text" name="phone" value="${sessionScope.query_user.phone}"/>
					</td>
					
					<td>
						<input type="text" name="email" value="${sessionScope.query_user.email}"/>
					</td>
				</tr>
				
				<tr>
					<td>真实姓名</td>
					<td>身份证号</td>
					<td>联系地址</td>
					<td></td>
				</tr>
				<tr>
					<td>
						<input type="text" name="realName" value="${sessionScope.query_user.realName}"/>
					</td>
					<td>
						<input type="text" name="idCard" value="${sessionScope.query_user.idCard}"/>
					</td>
					<td>
						<input type="text" name="address" value="${sessionScope.query_user.address}"/>
					</td>
					<td>
						<input type="submit" value="查询"/>
						<input type="button" name="clear" value="清空"/>
					</td>
				</tr>
			</table>
		</form>
	
	</div>
	

	<div id="user_list">
		<table class="table table-striped" id = "userTable">
			
			<tr class="title">
				<th>用户Id</th>
				<th>姓名</th>
				<th>密码</th>
				<th>电话</th>
				<th>邮箱</th>
				<th>真实姓名</th>
				<th>身份证</th>
				<th>地址</th>
				<th>操作</th>
			</tr>

			<!-- 遍历开始 -->
			<s:iterator value="#session.user_list" var="temUser" status="st">
				<tr class="list">
					<td><s:property value="#temUser.userId" /></td>
					<td><a data-target="#bootstrap" data-toggle="modal" class="modifiUser"
					 href="<s:property value="#st.index"/>"><s:property
								value="#temUser.userName" /></a></td>
								
					<td><s:property value="#temUser.userPassword" /></td>
					<td><s:property value="#temUser.phone" /></td>
					<td><s:property value="#temUser.email" /></td>
					<td><s:property value="#temUser.realName" /></td>
					<td><s:property value="#temUser.idCard" /></td>
					<td><s:property value="#temUser.address" /><input type="hidden" value="<s:property value="#temUser.role.roleId" />"/></td>
					<td><a href="um-userDelete?deleteUserId=<s:property value="#temUser.userId"/>">删除</a></td>
				</tr>
			</s:iterator>
			<!-- 遍历结束 -->
		</table>

	</div>
	
	<div>
		<ul class="pagination"></ul>
	</div>
</div>
	
	
	
	<!-- bootstrap弹出框！ -->
	<div class="modal fade" id="bootstrap" tabindex="-1" role="dialog"
		aria-labelledby="firefoxModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="firefoxModalLabel">修改用户信息</h4>
				</div>

				<div class="modal-body">
					<form action="um-userMsgModif" method="post">
						<table width="400px">
							<tr>
								<td width="30%">Id：</td>
								<td><input type="text" name="userId" id="uid" readonly="readonly" /></td>
							</tr>
							<tr>
								<td width="30%">姓名：</td>
								<td><input type="text" name="userName" id="uname" ><strong id="message"></strong></td>
							</tr>
							<tr>
								<td width="30%">密码：</td>
								<td><input type="text" name="userPassword" id="upassword" /></td>
							</tr>
							<tr>
								<td width="30%">电话：</td>
								<td><input type="text" name="phone" id="uphone" /></td>
							</tr>
							<tr>
								<td width="30%">邮箱：</td>
								<td><input type="text" name="email" id="uemail"/></td>
							</tr>
							<tr>
								<td width="30%">真实姓名：</td>
								<td><input type="text" name="realName" id="urealname"/></td>
							</tr>
							<tr>
								<td width="30%">身份证：</td>
								<td><input type="text" name="idCard" id="uidcard"/></td>
							</tr>
							<tr>
								<td width="30%">联系地址：</td>
								<td><input type="text" name="address" id="uaddress"/></td>
							</tr>
							
							<tr>
								<td>
									<s:select list="#session.role_list" label="角色"  id="urole" name="userRoleId"
											listValue="roleName" listKey="roleId">
									</s:select> 
								</td>
							</tr>
							
							<tr>
								<td width="30%"></td>
								<td>
									<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
									<input class="btn btn-primary" type="submit" value="修改">
								</td>
							</tr>
						</table>
					</form>
				</div>
			</div>
		</div>
	</div>
		
	
	<script src="${pageContext.request.contextPath }/bootstrap/js/tether.min.js"></script>
	<script src="${pageContext.request.contextPath }/bootstrap/js/util.js"></script>
	<script src="${pageContext.request.contextPath }/bootstrap/js/modal.js"></script>
	<script src="${pageContext.request.contextPath }/bootstrap/js/collapse.js"></script>
	<script src="${pageContext.request.contextPath }/bootstrap/js/tooltip.js"></script>
	<script src="${pageContext.request.contextPath }/bootstrap/js/popover.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/scripts/jBootstrapPage.js"></script> 
	
	
</body>
</html>